<template>
<div class="home" id="home">
  <div class="top_bg">
    <div class="top_content">
      <div class="t_l_div">
        <div class="t_h">AI赋能产业升级<br>数据驱动精准招商</div>
        <div class="t_desc">一云：产业链智慧招商云</div>
        <div class="t_desc">一网：产业链投资与招商网</div>
        <div class="t_desc">一端：一码投APP</div>
        <div class="flex btn_l">
          <div class="btn1 btn" @click="toppt('experience')">查看详情</div>
          <div class="btn2 btn" @click="toPage('experience')">平台咨询</div>
        </div>
      </div>
    </div>
  </div>
  <div class="tu_div">
    <div class="tu_t">产业链大数据招商云</div>
    <img src="~@/assets/img/zzz.png" alt="">
    <div class="flex_sb m_t20">
      <div class="num_item">五图<div class="s16">智能化招商地图</div></div>
      <div class="num_item">五库<div class="s16">全量企业库</div></div>
      <div class="num_item">四池<div class="s16">精准招商线索</div></div>
      <div class="num_item">四管理<div class="s16">全流程招商项目管理</div></div>
    </div>
  </div>
  <div class="w80"></div>
  <div class="line_div" ref="line" id="line_kuai">
    <img class="line" src="~@/assets/img/line.png" alt="">
    <div class="l_div left_div" >
      <div class="head">数字招商</div>
      <div class="dot"><div class="dian"></div></div>
      <div class="footer">
        <div>产业链图谱</div>
        <div>产业链企业库</div>
        <div>产业链项目库</div>
        <div>产业链招商</div>
      </div>
    </div>
    <div class="l_div mid_div" >
      <div class="head">数字转型</div>
      <div class="dot"><div class="dian"></div></div>
       <div class="footer">
        <div>数字化咨询</div>
        <div>数字化实施</div>
        <div>智能化集成</div>
      </div>
    </div>
    <div class="l_div right_div">
      <div class="head">智能对接</div>
      <div class="dot"><div class="dian"></div></div>
       <div class="footer">
        <div>产业链对接</div>
        <div>金融链对接</div>
        <div>企业智能服务</div>
      </div>
    </div>
  </div>
  <div class="mt100">
    <div class="tu_t">项目动态</div>
    <div class="flex w1140">
      <div class="list_div">
        <div class="flex l_item" v-for="item in proList.slice(0,5)" :key="item.id" @click="proDetail(item.id)">
          <div class="n_name w90">{{item.title}}</div>
          <div class="t_name w10">{{item.createtime.split(' ')[0]}}</div>
        </div>
        <div class="bbb" @click="toProList">查看更多</div>
      </div>
    </div>
  </div>
  <div>

  <div class="hzkh">
    <div class="tu_t">我们的客户</div>

    <div class='content'>
      <div class="content_div">
        <div class='content_item' v-for="(item) in imgList.slice((0+index*8),(8*(index+1)))" :key="item">
          <img :src="item" alt="">
        </div>
      </div>
      <div class="change_box">
        <span class="left_btn" v-show="index>0" @click="index=index-1" ></span>
        <span class="right_btn" @click="index=index+1" v-show="imgList.slice((0+(index+1)*8),(8*(index+2))).length>0"></span>
      </div>
    </div>
  </div>
  </div>

</div>
</template>
<script>
import img1 from '../assets/img/al_1.png'
import img2 from '../assets/img/al_2.png'
import img3 from '../assets/img/al_3.png'
import img4 from '../assets/img/al_4.png'
import img5 from '../assets/img/al_5.png'
import img6 from '../assets/img/al_6.png'
import img7 from '../assets/img/al_7.png'
import img8 from '../assets/img/al_8.jpg'
import img9 from '../assets/img/al_9.png'
import img10 from '../assets/img/al_10.png'
import img11 from '../assets/img/al_11.png'
import img12 from '../assets/img/al_12.png'
import img13 from '../assets/img/al_13.png'
import img14 from '../assets/img/al_14.png'
import img15 from '../assets/img/al_15.png'
import img16 from '../assets/img/al_16.png'
import img17 from '../assets/img/al_17.png'
import img18 from '../assets/img/al_18.png'
import img19 from '../assets/img/al_19.png'
import img20 from '../assets/img/al_20.png'
import {GetBusinessNewsList} from '@/api/api'
export default {
  name: 'Home',
  data(){
    return{
      isShow:false,
      proList:[],
      imgList:[img1,img2,img3,img4,img5, img6,img7, img8,img9,img10, img11, img12,img13,img14,img15,img16,img17,img18,img19,img20,],
      imgList1:[img1,img2,img3,img4,img5, img6,img7, img8,img9,img10, img11, img12],
      imgList2:[img1,img2,img3,img4,img5],
      imgList3:[img6,img7, img8,img9,img10, img11, img12],
      index:0 
    }    
  },
  created(){
    GetBusinessNewsList({type_id:32}).then(res=>{
      this.proList = res.data.data
    })
  },
  mounted(){
    // var line = document.getElementById("line_kuai")
    // document.getElementById("app").onscroll = ()=>{
    //   if((document.getElementById("app").scrollTop+400) > line.offsetTop){
    //     this.isShow = true
    //   }
    // }
  },
  methods:{
    toppt(){
      window.open('http://view.officeapps.live.com/op/view.aspx?src='+'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/files/3/2021/08/%E4%B8%80%E4%BA%91%E4%B8%80%E7%BD%91%E4%B8%80%E7%AB%AF%E4%B8%80%E4%B8%AD%E5%BF%83.pptx')
    },
    toYY(){
      window.open('https://www.chinaichain.com')
    },
    proDetail(id){
      window.location.href='https://www.chinaichain.com/projectNewDetail_m?id=' + id
    },
    toProList(){
      window.location.href='https://www.chinaichain.com/project_new_m'
    },
     toPage(name){
      this.$router.push( name )
    } 
  }
}
</script>
<style lang='scss' scoped>
.home{
  .top_bg{
    background: linear-gradient(130deg,#0f1312,#151c25,#151e4d);
    text-align: left;
    .top_content{
      width: 100%;
      margin: 0 auto;
      position: relative;
      min-height: 350px;
      background: url(https://static-1256442344.file.myqcloud.com/pc-website/prod/20211110/img/bg-right.9379b7a.png) no-repeat right bottom 15%,url(https://static-1256442344.file.myqcloud.com/pc-website/prod/20211110/img/bg-left-bottom.05f7130.png) no-repeat bottom left 18%;
      .top_right{
        position: absolute;
        width: 700px;
        top: 60px;
        right: -60px;
      }
      .t_l_div{
        padding-top: 70px;
        color: #fff;
        .t_h{
          font-size: 24px;
          font-family: KaiGenGothicSCExtraLight,Microsoft YaHei;
          font-weight: 500;
          position: relative;
          text-align: center;
        }
        .t_desc{
          margin-top: 12px;
          font-size: 14px;
          color: #7884ab;
          margin-bottom: 0;
          position: relative;
          padding-left: 13px;
          left: 80px;
          top: 8px;
          &::after{
            content: ' ';
            position: absolute;
            left: 0;
            top: 6px;
            height: 5px;
            width: 9px;
            border-bottom: 2px solid #71778d;
            border-left: 2px solid #71778d;
            transform: rotate(-45deg);
          }
        }
        .btn_l{
          margin-top: 40px;
          justify-content: center;
        }
        .btn1{
          width: 80px;
          height: 34px;
          background: linear-gradient(140deg,#677dde,#1838a8);
          color: #fff;
          border: none;
          border-radius: 6px;
          font-size: 13px;
          line-height: 34px;
          text-align: center;
        }
        .btn2{
          margin-left: 30px;
          width: 80px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          background-color: transparent;
          color: #627fff;
          border: 1px solid #627fff;
          border-radius: 6px;
          font-size: 13px;
        }
        .more_t{
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: baseline;
          color: #71778d;
          font-size: 14px;
          letter-spacing: 1px;
        }
        .h_w{
          font-weight: 600;
          margin-left: 10px;
        }
        .h_w:hover{
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
.tu_t{
  color: #0a1633;
  line-height: 5.867vw;
  font-size: 18px;
  text-align: center;
}
.tu_div{
  padding-top: 40px;
  padding-bottom: 30px;
  width: 100%;
  margin: 0 auto;
  img{
    width: calc(100% - 30px);
    margin: 20px 15px 0px;
  }
  .num_item{
    font-size: 18px;
    font-weight: 700;
    height: 100%;
    font-family: DIN-Condensed;
  }
  .s16{
    font-size: 12px;
    color: #222;
    font-weight: 500;
  } 
}
.m_t20{
  margin-top: 20px;
  position: relative;

}
.w80{
  width: 100%;
  height: 40px;
}
.line{
  width: calc(100% - 40px);
  height: 100px;
  z-index: -1;
}
.line_div{
  position: relative;
  height: 300px;

  .l_div{
    opacity: 0;
    width: 33.33%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
  }
  .left_div{
    transition: all 1s;
    left: 2%;
    bottom: 36.5%;
    opacity: 1;
  }
  .mid_div{
    transition: all 1.5s;
    transition-delay:0.5s;
    left: 35%;
    bottom: 53.3%;
    opacity: 1;
  }
  .right_div{
    transition: all 2s;
    transition-delay:1s;
    left: 67%;
    bottom: 68.8%;
    opacity: 1;
  }
  .head{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 22px;
    background: linear-gradient(
90deg
,#4c79f6,#396fff);
    border-radius: 3px;
    font-size: 12px;
    color: #fff;
    position: relative;
    &::after{
      content: "";
      position: absolute;
      width: .533vw;
      height: 2.667vw;
      border-radius: .267vw;
      bottom: -4vw;
      left: 29px;
      background: #396fff;
    }
  }
  .dot{
    margin: 18px 0 20px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    border: 3px solid #396fff;
  }
  .footer{
    color: #909090;
    font-size: 12px;
    text-align: left;
    div{
      line-height: 18px;
    }
  }
}
.w1140{
  width: 100%;
  margin: 20px auto 0;
}
.list_div{
  width: calc(100% - 40px);
  margin:  0 20px;
  border: 1px solid #e1e6f1;
  border-radius: 5px;
  padding: 10px 10px 0;
  .l_item{
    height: 60px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e1e6f1;
    text-align: left;
    &:hover{
      color: #2f6bff;
    }
  }
  .c_name{
    font-size: 12px;
    color: #396fff;
    text-align: center;
    border: 1px solid #2f6bff;
    padding: 3px;
    line-height: 1;
    height: 20px;
    margin-right: 5px;
  }
  .n_name{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
    font-size: 15px;
  }
  .t_name{
    text-align: right;
    min-width: 80px;
    color: #bbb;
    font-size: 14px;
  }
}
.bbb{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 30px;
  border: 1px solid #396fff;
  border-radius: 15px;
  color: #396fff;
  font-size: 12px;
  margin: 20px auto;
  &:hover{
    color:#fff;
    background: #396fff;
    cursor: pointer;
  }
}
.mt100{
  margin-top: -40px;
}
  .hzkh{
    background-color: #fff;
    padding: 20px 15px 70px 15px;
    background: url(~@a/img/hzkh.png) 0 0 no-repeat;
    background-size: 100% 100%;
    // height: 50rem;
    margin-top: 40px;
    h1{
      color: #222;
      text-align: center;
      font-size: 22px;
      font-weight: 400;
    }
    h4{
      font-size: 14px;
      padding-top: .5rem;
      margin-bottom: 1rem;
      font-weight: 400;
    }
    .content{
      height: 360px;
      background: hsla(0,0%,100%,.7);
      padding: 14px 10px 60px 10px;
      position: relative;
      &::v-deep .ivu-tabs-bar {
        border: none!important;
        margin-bottom: 1rem!important;
        margin-left: 56px!important;
      }
      &::v-deep .ivu-tabs-nav .ivu-tabs-tab {
        font-size: 14px!important;
        margin-right: 40px!important;
        color: rgb(102, 102, 102)!important;
        padding: .5rem;
      }
      &::v-deep .ivu-tabs-nav .ivu-tabs-tab-active {
        color: rgb(42, 164, 245)!important;
        font-weight: 700;
        border-bottom: 3px solid #2091d3!important;
      }
      &::v-deep .ivu-tabs-ink-bar{
        visibility: hidden !important;
      }
      &::v-deep .ivu-tabs-nav-prev{
        visibility: hidden !important;
      }
      &::v-deep .ivu-tabs-nav-next{
        visibility: hidden !important;
      }
      .content_div{
        white-space: normal!important;
        border: 1px solid #f5f5f7;
        border-left: none;
        border-top: none;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        .content_item{
          width: calc(50% - 1px);
          height: 60px;
          border: 1px solid #f5f5f7;
          border-bottom: none;
          border-right: none;
          display: flex;
          align-items: center;
          justify-content:center;
          img{
            width: 100%;
          }
        }
      }
      .change_box {
        position: absolute;
        right: 12px;
        bottom: 12px;
        span{
          display: inline-block;
          vertical-align: middle;
          width: 2.5rem;
          height: 2.5rem;
          background: #fff;
          margin-left:6px;
          cursor: pointer;
          background: url() 0 0 no-repeat;
          background-size: 100% 100%;
        }
        .left_btn{
          transform: rotate(180deg);
        }
      }
    }
  }
  .forth_box {
    background: url(~@a/img/bgcenter.jpg) 0 0 no-repeat;
    background-size: 100% 100%;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    img{
      width:90px;
      height: 90px;
      border: 1px solid #fff;
      border-radius:50%;
      padding:20px;
      margin: 20px;
    }
    .title_1{
      font-size:26px;
      font-weight: 700;
      margin: 20px;
      letter-spacing: 2px;
      position: relative;
      &::after{
        content:' ';
        right: -30px;
        top: -15px;
        position: absolute;
        height: 70px;
        width: 1px;
        background:rgba($color: #fff, $alpha: .2)
      }
    }
    .title_2{
      font-size:26px;
      margin: 0 20px 0 40px;
      letter-spacing: 2px;
    }
    .title_3{
      font-size:21px;
      letter-spacing: 2px;
    }
  }
  
</style>
